<template>
  <div class="w-full h-full flex flex-col rounded">
    <div class="flex justify-end px-5px">
      <filter-button @click="setActive"/>
    </div>
    <div class="flex items-center p-5px box-border mt-10px w-full h-50px bg-light-50 rounded"
         v-show="active">
      <div class="w-190px">
        <search-input placeholder="输入标题关键词(用空格分隔)" @search="onSearch"/>
      </div>
      <div class="ml-10px h-35px">
        <select-input prefix="迭代" v-model:value="iterationValue" :options="ITERATION_OPTIONS"/>
      </div>
      <div class="ml-10px">
        <add-button>
          <div>to work</div>
        </add-button>
      </div>
    </div>
    <div class="flex-1 bg-light-50 rounded mt-10px"></div>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import SelectInput from "@/components/customInput/SelectInput.vue"
import SearchInput from "@/components/customInput/SearchInput.vue"
import FilterButton from "@/components/customButton/FilterButton.vue"
import AddButton from "@/components/customButton/AddButton.vue"
import {useActive} from "@/hooks"

const {active, setActive} = useActive(false)
const ITERATION_OPTIONS = [
  "全部",
  "迭代-01",
  "迭代-02",
  "迭代-03",
  "迭代-04",
  "迭代-05",
]
const iterationValue = ref<string>("全部")

function onSearch(value: string) {
  console.log("search: ", value)
}
</script>

<style scoped>

</style>